<template>
  <view>
    <view class="full" @click="closeFull"></view>

    <view class="login-out">
      <view
        ><b>全线网报警筛选条件{{ restoreFlag }}</b></view
      >
      <view><b>报警日期范围</b></view>
      <view class="work-date" @click="showDate(true)"
        >{{ start == "" ? "开始日期" : start }}
        <view class="fr">
          <image src="/static/img/date-icon.png" class="work-date-icon"></image>
        </view>
      </view>
      <view class="work-date" @click="showDate(false)"
        >{{ end == "" ? "结束日期" : end }}
        <view class="fr">
          <image src="/static/img/date-icon.png" class="work-date-icon"></image>
        </view>
      </view>

      <view style="margin: 16px 0"><b>报警等级</b></view>
      <view
        class="fl status ac"
        :class="{ on: level.includes(1) }"
        @click="setLevel(1)"
        >一级</view
      >
      <view
        class="fl status ac"
        :class="{ on: level.includes(2) }"
        @click="setLevel(2)"
        >二级</view
      >
      <view
        class="fl status ac"
        :class="{ on: level.includes(3) }"
        @click="setLevel(3)"
        >三级</view
      >
      <view
        class="fl status ac"
        :class="{ on: level.includes(10) }"
        @click="setLevel(10)"
        >预警</view
      >
      <view class="clearfix"></view>

      <view style="margin: 16px 0"><b>报警状态</b></view>
      <view
        class="fl status ac"
        style="padding: 0 9px"
        :class="{ on: status === 0 }"
        @click="setStatus(0)"
        >未恢复</view
      >
      <view
        class="fl status ac"
        style="padding: 0 9px"
        :class="{ on: status === 1 }"
        @click="setStatus(1)"
        >已恢复</view
      >
      <!-- <text class="fl status ac" style="padding: 0 9px;" :class="{on:status == 2}" @click="status = 2">非检修</text>
			<text class="fl status ac" :class="{on:status == 3}" @click="status = 3">检修</text> -->
      <view class="clearfix"></view>

      <view class="btn"
        ><button class="cancel-btn" @click="reset"><b>重置</b></button
        ><button class="default-btn fr" @click="ok"><b>确定</b></button></view
      >
    </view>

    <view class="full full2" v-show="show_date"></view>
    <u-picker
      v-model="show_date"
      :params="params"
      mode="time"
      @confirm="setDate"
      @cancel="cancel"
    ></u-picker>
  </view>
</template>

<script>
export default {
  props: ["tab", "restoreFlag", "parentLevel", "parentStart", "parentEnd"],
  data() {
    return {
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true,
      },
      currentDate: new Date(),
      start: "",
      end: "",
      type: "",
      level: [1, 2],
      status:
        this.restoreFlag != "" ? parseInt(this.restoreFlag) : this.restoreFlag,
      show_date: false,
      lastStart: "",
      lastEnd: "",
    };
  },
  watch: {
    tab: {
      handler(n, o) {
        this.handlerTabChange();
      },
    },
  },
  mounted() {
    this.level =
      typeof this.parentLevel == "string"
        ? this.parentLevel.split(",").map((item) => {
            return parseInt(item);
          })
        : this.parentLevel;
    this.lastStart = this.parentStart;
    this.lastEnd = this.parentEnd;
    this.handlerTabChange();
  },
  methods: {
    handlerTabChange() {
      if (this.tab == 1) {
        this.status = "";
        this.start = this.lastStart || this.getToday() + " 00:00:00";
        this.end = this.lastEnd || this.getToday() + " 23:59:59";
      } else {
        this.status = 0;
        this.start = "";
        this.end = "";
      }
      this.ok();
    },
    closeFull() {
      this.$emit("closeFull");
    },
    setStatus(i) {
      if (this.status === i) {
        this.status = "";
      } else {
        this.status = i;
      }
    },
    setLevel(i) {
      if (this.level.includes(i)) {
        this.level = this.level.filter((item) => {
          return item != i;
        });
      } else {
        this.level.push(i);
      }
    },
    showDate(bol) {
      this.type = bol;
      this.show_date = true;
    },
    reset() {
      this.currentDate = new Date();
      this.start = "";
      this.end = "";
      this.type = "";
      this.level = [];
      this.status = "";
    },
    cancel() {
      this.show_date = false;
    },
    ok() {
      let obj = {
        start: this.start,
        end: this.end,
        level: this.level.join(","),
        status: this.status,
      };
      this.$emit("closeFull", obj);
    },
    setDate(obj) {
      let str =
        obj.year +
        "/" +
        obj.month +
        "/" +
        obj.day +
        " " +
        obj.hour +
        ":" +
        obj.minute +
        ":" +
        obj.second;
      // this.type ? this.start = str : this.end = str;
      this.type
        ? (this.lastStart = this.start = str)
        : (this.lastEnd = this.end = str);
      this.cancel();
    },
  },
};
</script>

<style scoped>
.login-out {
  padding: 26px 0 0 26px;
}

.login-out > view:nth-child(1) {
  margin-bottom: 16px;
}

.login-out > view:nth-child(2) {
  font-size: 14px;
  margin-bottom: 12px;
}

.work-date {
  line-height: 50px;
  border-bottom: 1px solid #d7d7d7;
  color: #3e3a39;
  font-size: 14px;
  padding-right: 27px;
}

.work-date-icon {
  width: 15px;
  height: 15px;
  vertical-align: middle;
}

.btn {
  position: absolute;
  width: 100%;
  bottom: 5%;
  left: 0;
  padding: 0 15px;
}

.default-btn,
.cancel-btn {
  width: 47%;
  display: inline-block;
}

.full2 {
  z-index: 99;
}

.login-out > .status {
  line-height: 26px;
  border: 1px solid rgba(62, 58, 57, 0.4);
  padding: 0 13px;
  box-sizing: border-box;
  border-radius: 6px;
  margin-bottom: 16px;
  margin-right: 10px;
  font-size: 12px;
  position: relative;
  color: rgba(62, 58, 57, 0.7);
}

.login-out > .on {
  border: 1px solid #307be0;
  color: #307be0;
}

.login-out > .on::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -2px;
  background: url("/static/img/alarm-lv.jpg") no-repeat;
  background-size: 100% 100%;
  width: 15px;
  height: 15px;
}
</style>
